﻿<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>标签管理</title>
    <jsp:include page="/resources/inc/head.jsp" flush="true"/>
</head>
<body class="md-skin">
<div class="wrapper wrapper-content animated fadeInRight">
    <div id="toolbar">
        <shiro:hasPermission name="cms:tag:create"><a class="waves-effect waves-button" href="javascript:;"
                                                      onclick="createAction()"><i class="zmdi zmdi-plus"></i>
            新增标签</a></shiro:hasPermission>
        <shiro:hasPermission name="cms:tag:update"><a class="waves-effect waves-button" href="javascript:;"
                                                      onclick="updateAction()"><i class="zmdi zmdi-edit"></i>
            编辑标签</a></shiro:hasPermission>
        <shiro:hasPermission name="cms:tag:delete"><a class="waves-effect waves-button" href="javascript:;"
                                                      onclick="deleteAction()"><i class="zmdi zmdi-close"></i>
            删除标签</a></shiro:hasPermission>
    </div>
    <table id="table"></table>
</div>
<jsp:include page="/resources/inc/footer.jsp" flush="true"/>
<script>
    var $table = $('#table');
    $(function () {
        // bootstrap table初始化
        $table.bootstrapTable({
            url: '${basePath}/manage/tag/list',
            height: getHeight(),
            striped: true,
            search: true,
            showRefresh: true,
            showColumns: true,
            minimumCountColumns: 2,
            clickToSelect: true,
            detailView: true,
            detailFormatter: 'detailFormatter',
            pagination: true,
            paginationLoop: false,
            sidePagination: 'server',
            silentSort: false,
            smartDisplay: false,
            escape: true,
            searchOnEnterKey: true,
            idField: 'tagId',
            maintainSelected: true,
            toolbar: '#toolbar',
            columns: [
                {field: 'ck', checkbox: true},
                {field: 'tagId', title: '编号', sortable: true, align: 'center'},
                {field: 'systemId', title: '所属系统'},
                {field: 'name', title: '标签名称'},
                {field: 'alias', title: '标签别名'},
                {field: 'description', title: '描述'},
                {field: 'icon', title: '图标', sortable: true, align: 'center', formatter: 'iconFormatter'},
                {field: 'type', title: '类型', sortable: true, align: 'center', formatter: 'typeFormatter'},
                {
                    field: 'action',
                    title: '操作',
                    align: 'center',
                    formatter: 'actionFormatter',
                    events: 'actionEvents',
                    clickToSelect: false
                }
            ]
        });
    });
    // 格式化操作按钮
    function actionFormatter(value, row, index) {
        return [
            '<a class="update" href="javascript:;" onclick="updateAction(' + row.tagId + ')" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a>　',
            '<a class="delete" href="javascript:;" onclick="deleteAction(' + row.tagId + ')" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
        ].join('');
    }
    // 格式化图标
    function iconFormatter(value, row, index) {
        return '<i class="' + value + '"></i>';
    }
    // 格式化类型
    function typeFormatter(value, row, index) {
        if (value == 1) {
            return '<span class="label label-primary">普通</span>';
        }
        if (value == 2) {
            return '<span class="label label-danger">热门</span>';
        }
    }
    // 新增
    var createDialog;
    function createAction() {
        createDialog = $.dialog({
            theme: 'Material',
            animation: 'RotateXR',
            animationSpeed: 300,
            keyboardEnabled: true,
            columnClass: 'col-md-6 col-md-offset-3',
            title: '新增标签',
            content: 'url:${basePath}/manage/tag/create',
            onContentReady: function () {
                initMaterialInput();
            }
        });
    }
    // 编辑
    var updateDialog;
    function updateAction(tagId) {
        if (tagId != null) {
            doUpdate(tagId);
        } else {
            var rows = $table.bootstrapTable('getSelections');
            if (rows.length != 1) {
                $.confirm({
                    title: false,
                    content: '请选择一条记录！',
                    autoClose: 'cancel|3000',
                    backgroundDismiss: true,
                    buttons: {
                        cancel: {
                            text: '取消',
                            btnClass: 'waves-effect waves-button'
                        }
                    }
                });
            } else {
                doUpdate(rows[0].tagId);
            }
        }
    }

    // 更新数据
    function doUpdate(tagId) {
        updateDialog = $.dialog({
            theme: 'Material',
            animation: 'RotateXR',
            animationSpeed: 300,
            keyboardEnabled: true,
            columnClass: 'col-md-6 col-md-offset-3',
            title: '编辑标签',
            content: 'url:${basePath}/manage/tag/update/' + tagId,
            onContentReady: function () {
                initMaterialInput();
            }
        });
    }


    // 删除
    var deleteDialog;
    function deleteAction(tagId) {
        if (tagId != null) {
            var ids = new Array();
            ids.push(tagId);
            doDelete(ids);
        } else {
            var rows = $table.bootstrapTable('getSelections');
            if (rows.length == 0) {
                $.confirm({
                    title: false,
                    content: '请至少选择一条记录！',
                    autoClose: 'cancel|3000',
                    backgroundDismiss: true,
                    buttons: {
                        cancel: {
                            text: '取消',
                            btnClass: 'waves-effect waves-button'
                        }
                    }
                });
            } else {
                var ids = new Array();
                for (var i in rows) {
                    ids.push(rows[i].tagId);
                }
                doDelete(ids);
            }
        }
    }
    //删除数据
    function doDelete(ids) {
        deleteDialog = $.confirm({
            type: 'red',
            animationSpeed: 300,
            title: false,
            content: '确认删除该标签吗？',
            buttons: {
                confirm: {
                    text: '确认',
                    btnClass: 'waves-effect waves-button',
                    action: function () {
                        $.ajax({
                            type: 'get',
                            url: '${basePath}/manage/tag/delete/' + ids.join("-"),
                            success: function (result) {
                                if (result.code != 1) {
                                    if (result.data instanceof Array) {
                                        $.each(result.data, function (index, value) {
                                            $.confirm({
                                                theme: 'dark',
                                                animation: 'rotateX',
                                                closeAnimation: 'rotateX',
                                                title: false,
                                                content: value.errorMsg,
                                                buttons: {
                                                    confirm: {
                                                        text: '确认',
                                                        btnClass: 'waves-effect waves-button waves-light'
                                                    }
                                                }
                                            });
                                        });
                                    } else {
                                        $.confirm({
                                            theme: 'dark',
                                            animation: 'rotateX',
                                            closeAnimation: 'rotateX',
                                            title: false,
                                            content: result.data.errorMsg,
                                            buttons: {
                                                confirm: {
                                                    text: '确认',
                                                    btnClass: 'waves-effect waves-button waves-light'
                                                }
                                            }
                                        });
                                    }
                                } else {
                                    deleteDialog.close();
                                    $table.bootstrapTable('refresh');
                                }
                            },
                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                $.confirm({
                                    theme: 'dark',
                                    animation: 'rotateX',
                                    closeAnimation: 'rotateX',
                                    title: false,
                                    content: textStatus,
                                    buttons: {
                                        confirm: {
                                            text: '确认',
                                            btnClass: 'waves-effect waves-button waves-light'
                                        }
                                    }
                                });
                            }
                        });
                    }
                },
                cancel: {
                    text: '取消',
                    btnClass: 'waves-effect waves-button'
                }
            }
        });
    }
</script>
</body>
</html>